<template>
  <div>
    <!-- 面包屑导航区 -->
	<el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>空间</el-breadcrumb-item>
      <el-breadcrumb-item>学习资料添加</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
	<el-card>
		<div class="box">
			<div class="top">
				<el-tooltip class="item" effect="dark" content="学习笔记添加" placement="top-start">
					<el-button>学习笔记添加</el-button>
				</el-tooltip>
			</div>
		</div>
	</el-card>
    <el-card>
      <!-- Tab栏 -->
      <el-form
        :model="addsForm"
        :rules="addsFormRules"
        ref="addsFormRef"
        label-width="100px"
        label-position="top" >
        <el-tabs :tab-position="'left'">
          <el-tab-pane label="" name="0">
            <el-form-item label="标题" prop="message">
              <el-input placeholder="请输入标题" v-model="addsForm.message"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="dynamic">
				<!-- <el-input
				  type="textarea"
				  :rows="4"
				  placeholder="请输入内容"
				  v-model="addsForm.dynamic">
				</el-input> -->
			
			<!-- 富文本编辑器 -->
			<editor
			   v-model="addsForm.dynamic"
			   :api-key="TINYMCEKEY"
			   :init="tinyConfig"
			 ></editor>
		</el-form-item>
          </el-tab-pane> 
		  <!-- 确认按钮 -->
            <el-button type="primary" class="btnAdd" @click="addMessage" style="background-color: #FF0000;color: #FFFFFF">确认</el-button>
			<!-- 取消按钮 -->
			<el-button type="primary" class="btnAdd" @click="Return" style="background-color: #696969;color=#FFFFFF">取消</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

import _ from 'lodash'
export default {
 components:{
	    	editor:Editor
	    },
  data () {
    return {
      // 添加学习笔记的表单对象
      addsForm: {
        message: '',
        dynamic: '',
		state:2,
		studentid: JSON.parse(window.sessionStorage.getItem('userInfo')).id,
      },
      addsFormRules: {
        message: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
      },
	  textarea: '',
	  TINYMCEKEY:'j10bfaad909pay4tee8ha257cu0amobcf6c6tp0ydq7v5d6d',
	  tinyConfig:{
	    height: 500,
	    menubar: true,
	    plugins: [
	      'advlist autolink lists link image charmap print preview anchor',
	      'searchreplace visualblocks code fullscreen',
	      'insertdatetime media table paste code help wordcount'
	    ],
	    toolbar:
	      'undo redo | formatselect | bold italic backcolor | \
	      alignleft aligncenter alignright alignjustify | \
	      bullist numlist outdent indent | removeformat | help'
	  }
  }
  },
  created () {
    
  },
  methods: {
    // 添加商品 完成后返回空间主页
    addMessage() {
      this.$refs.addsFormRef.validate(async valid => {
        if (!valid) return this.$message.error('请填写必要的表单项！')
        // 将this.addsForm进行深拷贝
        const forms = _.cloneDeep(this.addsForm) 
        const { data: spa } = await this.$http.post('addspace', forms)
		//console.log(forms)
        this.$message.success('学习资料添加成功!')		
        this.$router.push('/space')
      })
    },
	//页面跳转到空间主页
	async Return(){
		this.$router.push('/space')
  },
 },
 }
</script>

<style lang='less' scoped>
      .el-checkbox {
          margin: 0 8px 0 0 !important;
      }
      .previewImg{
          width: 100%;
      }
      .btnAdd{
          margin-top: 15px
      }
</style>